<template>
  <div class="screen-container">
    <div class="scrren-header">
      <screenfull id="screenfull" class="screen-full hover-effect" />
    </div>
    <!--左侧统计-->
    <div class="body-gas-left">
      <!--气体侦测器统计-->
      <div class="gas-chart-container" style="margin-top: 68px">
        <div class="chart-header">气体检测器统计</div>
        <div class="gas-status-box">
          <div class="gas-status-other">
            <div class="screen-label">正常数</div>
            <div class="screen-value">
              {{ total.gasNormalityOfNumber ? total.gasNormalityOfNumber : 0 }}
            </div>
          </div>
          <div class="gas-status-center">
            <div class="screen-label">气体探测器数</div>
            <div class="screen-value">
              {{ total.gasOfNumber ? total.gasOfNumber : 0 }}
            </div>
          </div>
          <div class="gas-status-other">
            <div class="screen-label">异常数</div>
            <div class="screen-value">
              {{ total.gasAnomalyOfNumber ? total.gasAnomalyOfNumber : 0 }}
            </div>
          </div>
        </div>
      </div>
      <!--气体异常统计-->
      <div class="gas-chart-container">
        <div class="chart-header">气体检测器统计</div>
        <div class="gas-alarm-box">
          <div class="gas-alarm-item">
            <span>{{ alarm.yesterday ? alarm.yesterday : 0 }}</span>
            <span>昨日异常数</span>
          </div>
          <div class="gas-alarm-item">
            <span>{{ alarm.todaySum ? alarm.todaySum : 0 }}</span>
            <span>今日异常数</span>
          </div>
          <div class="gas-alarm-item">
            <span>{{
              alarm.todayOfyesterdayRatio ? alarm.todayOfyesterdayRatio : 0
            }}</span>
            <span>较昨日</span>
          </div>
          <div class="gas-alarm-item">
            <span>{{ alarm.lastWeekSum ? alarm.lastWeekSum : 0 }}</span>
            <span>上周异常数</span>
          </div>
          <div class="gas-alarm-item">
            <span>{{ alarm.thisWeekSum ? alarm.thisWeekSum : 0 }}</span>
            <span>本周异常数</span>
          </div>
          <div class="gas-alarm-item">
            <span>{{
              alarm.todayOfyesterdayRatio ? alarm.todayOfyesterdayRatio : 0
            }}</span>
            <span>较上周</span>
          </div>
          <div class="gas-alarm-item">
            <span>{{ alarm.lastMonthSum ? alarm.lastMonthSum : 0 }}</span>
            <span>上月异常数</span>
          </div>
          <div class="gas-alarm-item">
            <span>{{ alarm.thisMonthSum ? alarm.thisMonthSum : 0 }}</span>
            <span>本月异常数</span>
          </div>
          <div class="gas-alarm-item">
            <span>{{
              alarm.thisMonthOfLastMonthRatio ? alarm.thisMonthOfLastMonthRatio : 0
            }}</span>
            <span>较上月</span>
          </div>
        </div>
      </div>
    </div>
    <!--右侧统计-->
    <div class="body-gas-right">
      <div class="gas-chart-container" style="margin-top: 68px">
        <div class="chart-header">气体检测器实时数据</div>
        <div class="data-runtime-box">
          <div v-for="(item, index) in runtime" class="runtime-item">
            <div class="item-runtime-left">
              <div class="item-status-normal"></div>
              <div class="item-status-text">正常</div>
            </div>
            <div class="item-runtime-content">
              <span class="">名称:{{ item.gasName }}</span>
              <span class="">位号:{{ item.gasCode }}</span>
              <span class=""
                >{{ item.parameterName }}:{{ item.realTimeValue }}{{ item.units }}</span
              >
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--底部操作栏-->
    <div class="screen-operator">
      <div class="operate-button screen-home" @click="goToHome"></div>
      <div class="operate-button gas-active" @click="goToGas"></div>
      <div class="operate-button tank" @click="goToTank"></div>
      <div class="operate-button location" @click="goToLocation"></div>
    </div>
  </div>
</template>
<script setup name="Gas">
import axios from "axios";
const baseUrl = ref("http://192.168.124.249:9898");
import Screenfull from "@/components/Screenfull";
const router = useRouter();
const url = ref(
  "http://192.168.124.2:8084/location_system_5.4.9.5/map3d/nosecret.html?company=TSPDH&version=5.4.9.5&type=1&user=lyg&psw=Lyg@2022"
);
const total = ref({});
const alarm = ref({});
const runtime = ref([]);
/** 1:获取设备统计 */
function getGasEquipStatistics() {
  let url = baseUrl.value + "/screen/getGasStatistics";
  axios.get(url).then((res) => {
    total.value = res.data.data;
  });
}

/** 2:获取气体异常统计 */
function getGasAlarmStatistics() {
  let url = baseUrl.value + "/screen/getGasAlarmStatistics";
  axios.get(url).then((res) => {
    alarm.value = res.data.data;
  });
}

/** 3:获取气体实时数据 */
function getGasRuntimeStatistics() {
  let url = baseUrl.value + "/iotbase/gasList/" + "?dept=" + 100;
  axios.get(url).then((res) => {
    runtime.value = res.data.data;

    console.log(runtime.value);
  });
}

/** 跳转到首页 */
function goToHome() {
  router.push("/screen");
}

/** 跳转到气体侦测页面 */
function goToGas() {
  router.push("/screen/gas");
}
/** 跳转到储罐实时数据 */
function goToTank() {
  router.push("/screen/tank");
}

/** 跳转到定位 */
function goToLocation() {
  window.open(url.value);
}
getGasEquipStatistics();
getGasAlarmStatistics();
getGasRuntimeStatistics();
</script>
<style scoped lang="scss">
body {
  background-color: #1e3d70 !important;
}
</style>
